import {Button, Form, Input, message} from 'antd'
import './start.css'
import {LockOutlined, LoginOutlined, UserOutlined} from '@ant-design/icons'
import {login} from '../../request/login'
import {Link} from "react-router-dom"

function Login() {
    function onFinish(args) {
        login(args).then(token => {
            localStorage.setItem('token', token)
            window.location.assign("/main/home")
        }).catch(message.error)
    }

    return (
        <>
            <div className="start-switch">
                <Link to="/start/register">注册</Link>
            </div>
            <h1>信息管理系统-登录</h1>
            <div className="blank"></div>
            <Form onFinish={onFinish}>
                <Form.Item
                    name="uid"
                    rules={[
                        {
                            required: true,
                            message: '请输入账号',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined/>} placeholder="请输入账号" autoComplete="true"/>
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码',
                        }
                    ]}
                >
                    <Input.Password prefix={<LockOutlined/>} placeholder="请输入密码" autoComplete="true"/>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        <span>登录</span>
                        <LoginOutlined/>
                    </Button>
                </Form.Item>
            </Form>
            <div className="blank"></div>
        </>
    )
}

export default Login